<template>
  <div style="overflow: hidden;margin-left:-12%" class="person">
    <el-row>
      <el-col :span="8">
        <div style="font-weight: 700;font-size: 24px;">个人分配方式：</div>
      </el-col>
      <el-col :span="12">
        <el-table
          :data="deptUserName"
          :num_p='num_p'
          max-height="400"
          v-loading="personloading"
          element-loading-text="数据加载中"
        >
          <el-table-column label="员工姓名" width="230">
            <template slot-scope="scope">
              <span style="font-size: 20px">{{scope.row.realName}}</span>
            </template>
          </el-table-column>
          <el-table-column  prop='prioritys' label="优先级" width="120">
            <template slot-scope="scope">
              当前值:<span style="font-weight:bold;font-size:20px;">{{scope.row.priority}}</span>
              <el-input
                size="small"
                v-model="scope.row[scope.column.property]"
                type="number"
                placeholder="请输入"
                controls-position="right"
                :min=0
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="nums"  label="每次分配条数" width="120">
            
            <template slot-scope="scope">
              当前值:<span style="font-weight:bold;font-size:20px;">{{scope.row.num}}</span>
              <el-input
                size="small"
                v-model="scope.row[scope.column.property]"
                type="number"
                placeholder="请输入"
                controls-position="right"
                :min=0
              ></el-input> 
            </template>
          </el-table-column>
          <el-table-column
            prop="deptName"
            label="三级部门"
            :filters="datas"
            :filter-method="filterTag"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope" class="person2"> 
              <el-tag disable-transitions>{{scope.row.threeDeptName}}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "personaltable",
  props: {
    datas: {
      type: Array,
      request: true
    },
    deptLevelData: {
      type: Array,
      request: true
    },
    deptUserName: {
      type: Array,
      request: true
    },
    num_p:{
      type: Array,
      request: true
    },
    personloading:Boolean
  },
  data(){
    return {
      loading:true
    }
  },
  methods: {
    formatter(row, column) {
      return row.id;
    },
    filterTag(value, row) {
      return row.threeDeptName == value;
    },
    filterHandler(value, row, column) {
      const threeDeptName = column["realName"];
      return row[threeDeptName] === value;
    }
  }
};
</script>

<style lang="scss">
.el-table {
  display: block;
}
.has-gutter tr th {
  text-align: center;
}
.el-table__row td > .cell {
  text-align: center;
}
.el-table-filter__checkbox-group{
  padding-bottom: 20px;
}
</style>
<style lang='scss' scoped>
.el-row .el-col{
  margin-left: 0;
}


</style>